<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String tabStyle = "hover:bg-pink-100 active:bg-pink-200 rounded-lg p-2 flex items-center space-x-2";
    String mainContentStyle = "ml-56 mr-8 mt-16 h-[calc(100vh-4rem)] p-4 overflow-y-auto bg-base-200 night:bg-slate-800 rounded-2xl";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<c:url value="/assets/css/output.css"/>"/>
    <script src="<c:url value="/assets/js/jquery-3.6.0.min.js"/>"></script>
    <title>
        ${applicationScope.appTitle}
    </title>
</head>

<body>
<div class="h-screen overflow-hidden select-none">
    <!-- 侧边栏 -->
    <div class="mt-16 w-56 h-full fixed top-0 left-0 select-none">
        <ul class="menu">
            <li>
                <a href="javascript:void(0)"
                   data-page="/views/dashboard/child/controlContent.html"
                   class="<%=tabStyle%> sk-menu-item">
                    <jsp:include page="icons/icon-home.html" flush="true"/>
                    <span>主菜单</span>
                </a>
            </li>
            <li>
                <details open class="group">
                    <summary
                            class="<%=tabStyle%>">
                        <jsp:include page="icons/icon-task.html" flush="true"/>
                        <span>数据管理</span>
                    </summary>
                    <ul class="pl-4">
                        <li>
                            <a href="javascript:void(0)"
                               data-page="/views/dashboard/child/taskManager.html"
                               class="<%=tabStyle%> sk-menu-item">影片列表</a>
                        </li>
                        <li>
                            <a class="<%=tabStyle%>">爬虫任务</a>
                        </li>
                    </ul>
                </details>
            </li>
            <li>
                <a href="javascript:void(0)" data-page="/views/dashboard/child/mainContent.html"
                   class="<%=tabStyle%> sk-menu-item">
                    <jsp:include page="icons/icon-person.html" flush="true"/>
                    <span>个人设置</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- 顶栏 -->
    <div class="bg-green-700 h-16 w-full fixed top-0 z-10">
        <div class="flex items-center justify-between">
            <div class="navbar bg-base-100">
                <div class="flex-1">
                    <a class="btn btn-ghost text-xl">${applicationScope.appTitle} </a>
                </div>
                <jsp:include page="icons/icon-theme.html" flush="true"/>
                <jsp:include page="components/header-person-setting.jsp" flush="true"/>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div id="main-content" class="<%=mainContentStyle%>">
        <jsp:include page="child/movieManager.jsp" flush="true"/>
    </div>
</div>
</body>
</html>
